<template>

    <el-dialog title="选择用户" v-model="dialogVisible" width="850px" top="15vh">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="用户名称" class="item" prop="username" >
                <el-input v-model="queryParams.username" placeholder="请输入用户名称"  clearable style="width: 240px" @keyup.enter.native="load" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search"  @click="load">搜索</el-button>
                <el-button icon="refresh" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表区-->
        <el-table :data="tableData"  :header-cell-style="{background:'#eef1f6',color:'#606266'}"  @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="userId" sortable label="ID"></el-table-column>
            <el-table-column prop="username" label="姓名"></el-table-column>
            <el-table-column prop="nickName" label="昵称"></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template #default="scope">
                    <span v-if="scope.row.sex === '1'">男</span>
                    <span v-if="scope.row.sex === '0'">女</span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>

            <el-table-column prop="phone" width="180" label="电话"></el-table-column>
        </el-table>

        <!--列表分页-->
        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"> //双引号里面的total是定义一个变量，在这里定义了，就需要在下面data里面初始化一下
            </el-pagination>
        </div>

        <div class="dialog-footer">
            <el-button type="primary" @click="handleSelectUser">确 定</el-button>
            <el-button @click="visible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import request from "@/utils/request";
    import { ElMessage } from 'element-plus'
    import qs from 'qs'
    export default {
        name: "selectUser",
        props: {roleId:{type: [Number, String]}},
        emits:["ok"],
        data(){
            return {
                dialogVisible: false,
                total: 0,  //默认10条
                tableData: [],
                currentPage:1,
                pageSize:5,
                // 查询参数
                queryParams: {},
                userIds:[]
            }
        },

        methods:{
            show(){
                this.dialogVisible=true;
                this.load();
            },

            load(){
                request.get("/sys/user/authuser/unAllocatedUserList", {
                    params:{
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        username: this.queryParams.username,
                        roleId: this.roleId
                    }
                }).then(res => {
                    if(res.code==0){
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }

                })
            },

            //点击列表前面的复选框
            handleSelectionChange(selection){
                this.userIds = selection.map(item => item.userId);
            },


            //确定提交
            handleSelectUser(){
                let params = { userIds:this.userIds,  roleId:this.roleId}
                let data = qs.stringify(params,{arrayFormat:'repeat'});
                request.post("/sys/user/authuser/selectAll",data).then(res =>{
                    if(res.code==0){
                        ElMessage.success('保存成功');
                        this.dialogVisible = false;    //关闭当前弹窗
                        //通知父窗口刷新列表（authuser页面刷新列表）
                        this.$emit("ok");
                    }
                });
            },

            //在上面的data中，pageSize和currentPaage都有默认值，这里要触发分页，需要重新根据变量赋值
            //改变当前每页条数触发
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },

            //改变当前页码触发
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },

            reset(){
                this.$resetForm('queryForm');
            },
        }
    }
</script>

<style scoped>
    .dialog-footer{
        margin-top: 80px;
       /* margin-left:650px;*/
        text-align:right;
    }
</style>
